<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Elements Example</title>
</head>
<body>
    <header style="background-color: red;">
        <h1>My Website</h1>
        <nav>
            <u1>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </u1>
        </nav>
    </header>
    <main>
        <section>
            <h2>About Us</h2>
            <p>Welcome to our website. We provide...</p>
        </section>
        <section>
            <h2>Contact Information</h2>
            <address>
                Email:<a href="mailto:info@example.com">info@example.com</a><br>
                Phone:123-456-7890
            </address>
        </section>
    </main>
    <footer>
        <p>&copy;2023 My Website. All rights reserved.</p>
    </footer>

    <p>默认情况下，宽度始终是其容器的100%。</p>

    <div style="height: auto;background-color: greenyellow;">
        定义文档中的一个块定义文档中的一个块定义文档中的一个块定义文档中的一个块定义文档中的一个块
        定义文档中的一个块定义文档中的一个块

        定义文档中的一个块定义文档中的一个块定义文档中的一个块定义文档中的一个块
    </div>
    <p style="height: 50px;background-color: green;">
        定义文档中的一个块定义文档中的一个块定义文档中的一个块定义文档中的一个块
    </p>
    <h2 style="height: auto;background-color: aqua;">
        定义文档中的一个块定义文档中的一个块
    </h2>
    <ul>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
        <li>列表</li>
    </ul>

    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>

    






</body>
</html>